.wrapper {
    width: 100%;
    height: 100%;
    z-index: 2000;
}

#bgpic{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-image: url('/static/lotterydir/img/test4.jpg');
    z-index: 2500;
}

.recordcards {
    position: absolute;
    width: 96%;  !important;
    height: 96%; !important;
    overflow: visible;
    left: 2%; !important;
    top: 2%; !important;
    z-index: 50;
}

.recordcard {
    position: relative;
    width: 100% ;
    height: 100%;
    color: white ;
    font-size: 10px;
}
.recordphoto {
    position: absolute;
    left: 18.5%;
    top: 10%;
    width: 64% ;
    height: 52.5% ;
    color: white ;
    border-radius: 100%;
}


.recordcardtextdes {
    position: absolute;
    top: 65%;
    font-size: 2em;
    color: white ;
    width: 100%;
    text-align: center;
}

.recordcardgreetings {
    position: absolute;
    top: 78%;
    font-size: 1em;
    color: white ;
    width: 100%;
    text-align: center;
}

.recordcarddescription {
    position: absolute;
    top: 87%;
    font-size: 1.2em;
    color: white ;
    width: 100%;
    text-align: center;
}

.textintroduce {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 500;
}


.lotterybox {
    position: absolute;
    width: 9% ;
    height: 19.5% ;
    border-width: 5px;
    border-color: red;
    border-style:solid;
    border-radius: 10px;
    overflow: hidden;
    z-index: 2000;
}

.lotteryboxcontainer {
    position: absolute;
    width: 100% ;
    height: 100% ;
    border-width: 5px;
    border-color: black;
    z-index: 2000;
}



.lotterymodel{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.lotterymodel .lotteryshow{
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 4em;
    color: red;
    text-align: center;
    z-index: 3000;

}

.lotterymodel .lotteryresult{
    position: absolute;
    width: 13%;
    height: 28%;
    top: 30%;
    left: 46%;
    z-index: 3000;
}


.cell{
    width: 1em;
    height: 1em;
    font-size:520px;
    overflow: hidden;
    position:absolute;
    top:50%;
    left:50%;
    margin:-0.5em 0 0  -0.5em;
    opacity:0;
    animation:go 4s;
    transform-origin:left bottom;
}
.num{
    position:absolute;
    width: 1em;
    color:#E53F39;
    line-height: 1em;
    text-align: center;
    text-shadow:1px 1px 2px rgba(255,255,255,.3);
    animation:run 4s steps(4);
}




.earththreeanimation{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 400;
}

.lotterymodelcontainer{
    position: absolute;
    width: 100%;
    height: 100%;
    visibility: hidden;
    z-index: 500;
}

.shownum {
    position: absolute;
    width: 40%;
    height: 50%;
    left: 30%;
    top:30%;
    display: none;
    background-image: url("/static/lotterydir/img/3.png");
    background-size: cover;
    z-index: 2500;
}



@keyframes run{
    0%{top:0;}
    100%{top:-4em;}
}
@keyframes go{
  0%   {opacity:1;}
  84%  {opacity:1;transform:rotate(0deg) scale(1);}
  100% {opacity:0;transform:rotate(360deg) scale(.01);}
}


